<template>
  <div class="privateLetter">
    <div class="header">
      <div :class="{active: inputConfig.inputType === 1}" @click="changePushType(1)"> <i class="iconfont icon-T"></i>  <span>文字</span> </div>
      <div :class="{active: inputConfig.inputType === 2}" @click="changePushType(2)" style="display: flex; align-items: center">
        <div><i class="iconfont icon-img"></i></div>
        <div>图片</div>
      </div>
    </div>
    <div class="content">
      <el-input @keydown="listener" placeholder="请输入内容" v-if="inputConfig.inputType === 1" class="input-no-border" v-model="inputConfig.inputVal" type="textarea" :rows="rows" resize="none"></el-input>
      <div v-else-if="inputConfig.inputType === 2" class="imgBox">
        <el-image v-if="inputConfig.imageVal" fit="contain" class="imageClass" :src="inputConfig.imageVal" :preview-src-list="[inputConfig.imageVal]"></el-image>
        <div class="uploadBox">
          <div class="delImg" style="color: red" @click="delImg" v-if="inputConfig.imageVal">删除图片</div>
          <DUpload @successUpload="successUpload" :multiple="false" v-else>
            <div style="display: flex; align-items: center">
              <div class="iconImgBox"><i class="iconfont icon-img"></i></div>
              <div class="uploadText">上传图片</div>
            </div>
          </DUpload>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {watch, onMounted, ref, reactive} from 'vue'
import DUpload from "@/components/d-upload/index"
const props = defineProps({
  rows: {
    type: Number,
    default:  3
  },
  contentItem: {
    type: Object,
    default: () => ({})
  },
  // shift+enter 回车
  shiftEnter:{
    type: Boolean,
    default: () => false
  }

})

const inputConfig = reactive({
  inputType: 1,
  inputVal: "",
  imageVal:""
})

const emits = defineEmits(["submit"])
const listener = (e) => {
  if(e.keyCode === 13) {
    if(!e.shiftKey) {
      emits("submit")
      e.preventDefault()
      return false
    }
  }
}

watch(() => (props.contentItem), (newVal) => {
  inputConfig.inputType = newVal.answerType || newVal.type
  inputConfig.inputVal = ""
  inputConfig.imageVal = ""
  if(inputConfig.inputType === 1) {
    inputConfig.inputVal = newVal.content
  }else if(inputConfig.inputType === 2) {
    inputConfig.imageVal = newVal.content
  }else {
    inputConfig.inputType = 1
  }
}, {deep: true, immediate: true})


const changePushType = (val) => {
  inputConfig.inputType = val
}

const successUpload = (url) => {
  changePushType(2)
  inputConfig.imageVal = url
}

const delImg = () => {
  inputConfig.imageVal = ""
}
const clearContent = () => {
  inputConfig.imageVal = ""
  inputConfig.inputVal = ""
}
defineExpose({inputConfig, clearContent})
</script>

<style scoped lang="scss">
.privateLetter {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header{
  font-size: 14px;
  background: #f2f6f7;
  display: flex;
  padding: 10px 20px;
  &>div {
    margin-right: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    i {
      margin-right: 3px;
    }
  }
  .active {
    color: #0074d6;
  }
}
.imgBox {
  flex: 1;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  .imageClass {
    width: 100%;
    height: 100%;
    margin: 10px;
  }
  .delImg {
    margin-right: 20px;
    margin-top: 2px;
    font-size: 24px;
  }
  .uploadBox {
    cursor: pointer;
    position: absolute;
    display: flex;
    bottom: 10px;
    right: 10px;
    color: #0074d6;
    .uploadText, .icon-img {
      font-size: 24px;
    }
    .iconImgBox {
      margin-top: 4px;
      margin-right: 4px;
    }
    .icon-img {
      margin-top: 10px;
    }
  }
}

</style>